<template>
  <div class="flex flex-col items-center menu py-4">
    <ToggleDarkMode />
    <el-button
      class="animate-bounce-?"
      type="primary"
      :size="size0"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleCreate"
      >发表信息</el-button
    >
    <el-divider />
    <el-button
      :type="viewOffice == 1 ? 'primary' : ''"
      type="primary"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleOfficeSet(1)"
      >管制一室</el-button
    >
    <el-button
      :type="viewOffice == 2 ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleOfficeSet(2)"
      >管制二室</el-button
    >
    <el-divider />
    <el-button
      :type="viewType == 'all' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('all')"
      >全部信息</el-button
    >
    <!-- <el-button
      :type="viewType == 'public' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('public')"
      >公开信息</el-button
    > -->
    <el-button
      v-if="user"
      :type="viewType == 'private' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('mentioned')"
      >提到我的</el-button
    >
    <!-- <el-button
      :type="viewType == 'private' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('private')"
      >私密信息</el-button
    > -->
    <el-button
      v-if="user"
      :type="viewType == 'mine' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('mine')"
      >我发表的</el-button
    >
    <el-button
      v-if="user && userData.holeLevel > 0"
      :type="viewType == 'pending' ? 'primary' : ''"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleTypeSet('pending')"
      >待审核</el-button
    >
    <el-divider />
    <el-button
      type="primary"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleLogin"
    >
      <span v-if="user">账号设置</span>
      <span v-else>账号登录</span>
    </el-button>
    <el-button
      type="primary"
      :size="size1"
      :round="isRound"
      :text="isText"
      :link="isLink"
      @click="handleAbout"
      >关于此程序</el-button
    >
    <!-- type="primary" :size="size1"  -->
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import ToggleDarkMode from './ToggleDarkMode.vue'
import useViewStore from '@/stores/view.js'
import useUserStore from '@/stores/user.js'

const viewStore = useViewStore()
const userStore = useUserStore()
const user = computed(() => userStore.user)
const userData = computed(() => userStore.data)

const router = useRouter()
// const routes = useRoute()

const emits = defineEmits(['close'])

const isRound = ref(false)
const isText = ref(true)
const isLink = ref(false)
const size0 = ref('')
const size1 = ref('small')

const viewOffice = computed(() => viewStore.office)
const viewType = computed(() => viewStore.type)

const handleCreate = () => {
  router.push({ name: 'post' })
  emits('close')
}

const handleOfficeSet = (value) => {
  viewStore.office = value
  viewStore.type = 'public'
  viewStore.page = 0
  viewStore.load()
  router.push({ name: 'home' })
  emits('close')
}

const handleTypeSet = (value) => {
  viewStore.type = value
  viewStore.page = 0
  viewStore.load()
  router.push({ name: 'home' })
  emits('close')
}

const handleLogin = () => {
  router.push({ name: 'user' })
  emits('close')
}

const handleAbout = () => {
  router.push({ name: 'about' })
  emits('close')
}

onMounted(() => {
  if (viewStore.office == 0) {
    router.push({ name: 'welcome' })
  }
})
</script>

<style scoped>
.menu {
  width: 100%;
}

.menu > * {
  margin: 4px 0;
}
</style>
